<template>
	<view class="my_body">
		<view class="title">
			点击下方按钮打开小程序
		</view>
		<view class="zw">
			<!-- <button class="btn" style="font-size: 16px;margin-top: 10px;width: 200px;height: 40px;line-height: 40px;color: #ffffff;border-radius: 6px;border-color: #57be6a;" ref="demoBtn">打开小程序</button> -->
		</view>
		<wx-open-launch-weapp id="launch-btn" :appid="appId" path="pages/index/index">
			<script type="text/wxtag-template">
			    <button class="btn" style="font-size: 16px;margin-top: 10px;width: 200px;padding: 12px 0;color: #ffffff;border-radius: 8px;border-color: #57be6a;background: #57be6a;">打开小程序</button>
			  </script>
		</wx-open-launch-weapp>
	</view>
</template>

<script>
	import wx from '@/common/jweixin-module-master/lib/index.js';
	export default {
		data() {
			return {
				appId: ''
			}
		},
		onLoad(option) {
			if (option.appId) {
				this.appId = option.appId;
				this.initConfig();
			}
		},
		methods: {
			initConfig() {
				var windowHref = window.location.href;
				this.$http.get('/api/wx/parameter?url=' + encodeURIComponent(window.location.href.split('#')[0])).then(
					res => {
						console.log('注入结果', res.data);
						let resultWx = res.data
						wx.config({
							debug: false, // 开启调试模式
							appId: resultWx.appId, // 必填，公众号的唯一标识
							timestamp: resultWx.timestamp, // 必填，生成签名的时间戳
							nonceStr: resultWx.nonceStr, // 必填，生成签名的随机串
							signature: resultWx.signature, // 必填，签名
							jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
							openTagList: ['wx-open-launch-weapp']
						});
						wx.ready(() => {
							this.$nextTick(() => {
								try {
									console.log("进来了");
									var btn = document.getElementById('launch-btn');
									btn.addEventListener('launch', function(e) {
										console.log('success');
										console.log(e);
									});
									btn.addEventListener('error', function(e) {
										console.log('fail', e);
									})
								} catch (error) {

								}
							})

						});
					})

			},
		}
	}
</script>

<style>
	.btn {
		font-size: 16px;
		margin-top: 10px;
		width: 200px;
		height: 40px;
		line-height: 40px;
		background-color: #57be6a;
		color: #ffffff;
		border-radius: 8px;
		border-color: #57be6a;
	}
	.my_body {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.title {
		color: #333;
		font-size: 28rpx;
	}
	
	.zw {
		height: 20rpx;
	}
</style>